<template>
  <div class="aside">
    <div style="width: 99%; height: 100vh; overflow-y: auto">
      <div class="aside-container">
        <div class="aside-inner">
          <div class="aside-header">
            <div class="flex items-center">
              <svg
                focusable="false"
                aria-hidden="true"
                viewBox="0 0 24 24"
                data-testid="PlaylistPlusIcon"
                style="width: 1em; height: 1em; font-size: 28px; margin-right: 8px"
              >
                <path
                  d="M3 16H10V14H3M18 14V10H16V14H12V16H16V20H18V16H22V14M14 6H3V8H14M14 10H3V12H14V10Z"
                ></path>
              </svg>
              {{ t('flypass.items') }}
            </div>
          </div>
          <hr
            style="
              margin-bottom: 16px;
              border-width: 0px 0px thin;
              border-style: solid;
              border-color: rgba(0, 0, 0, 0.12);
            "
          />
          <div>
            <div class="aside-item">
              <div class="flex items-center px-4 justify-between">
                <p>{{ t('flypass.in_this_pass') }}</p>
                <button class="caret-button" :class="{active: collapses[0].visible}" @click="() => handleCollapseClick(0)">
                  <svg-icon icon-class="CaretBottom"></svg-icon>
                </button>
              </div>
              <Transition name="collapse">
                <div
                  v-show="collapses[0].visible"
                  class="aside-collapse"                  
                >                                                                            
                  <div class="collapse-item in-this-pass" style="" :class="{active: store.currentItemId === item.id}" v-for="item in store.items" @click="() => store.setCurrentItemId(item.id)">
                    <span>{{ item.key }}</span>
                  </div>                                      
                </div>
              </Transition>
            </div>
          </div>
          <hr class="divider" />
          <div>
            <div class="aside-item">
              <div class="flex items-center px-4 justify-between">
                <p>{{ t('flypass.add_present_fields') }}</p>
                <button class="caret-button" :class="{active: collapses[1].visible}"  @click="() => handleCollapseClick(1)">
                  <svg-icon icon-class="CaretBottom"></svg-icon>
                </button>
              </div>
              <Transition name="collapse">
                <div
                  v-show="collapses[1].visible"
                  class="aside-collapse"                  
                >
                  
                  <Container group-name="item" :get-child-payload="getChildPayload('Present')">
                    
                    <Draggable v-for="item in store.fields.filter((field: Field) => field.type === 'Present' )" style="width: fit-content" >
                      <div class="collapse-item">
                        <DragSvg />
                        <span>{{ item.key }}</span>
                      </div>
                    </Draggable>
                  </Container>
                </div>
              </Transition>
            </div>
          </div>
          <hr class="divider" />

        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import DragSvg from './assets/drag-svg.vue'
import { Container, Draggable } from "vue3-smooth-dnd";
import type { Collapse, Field, FieldType } from '#/pass'
import { usePassStore } from '@/store/modules/pass'

const store = usePassStore()
const { t } = useI18n()
 
const collapses = ref<Collapse[]>([
  { height: '0', visible: false },
  { height: '0', visible: false },
  { height: '0', visible: false }
])
const draggedItem = ref<Field | null>(null)

function handleCollapseClick (index: number) {
  collapses.value[index].visible = !collapses.value[index].visible
}

function getChildPayload(type: FieldType) {
  return (index: number) => {
    draggedItem.value = store.fields.filter((field: Field) => field.type === type)[index]  
    store.setDraggingItem(draggedItem.value)    
  }
}

</script>

<style lang="scss" scoped>
@import url('./styles/index.scss');

.caret-button {
  padding: 9px;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  &:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }
  &.active {
    transform: rotate(180deg);
  }
}

.collapse-enter-from,
.collapse-leave-to {
  transform: scaleY(0);
}

.collapse-enter-to,
.collapse-leave-from {
  transform: scaleY(1);
}

.collapse-enter-active {}

.collapse-enter-active,
.collapse-leave-active {
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.aside-collapse {
  transform-origin: top;
  overflow: hidden;
}

.collapse-item {
  height: 40px;
  display: flex;
  padding: 0 16px;
  align-items: center;
  justify-content: flex-start;
  cursor: grab;
  &.in-this-pass {
    cursor: pointer;
    margin: 0 10px; 
    border-radius: 8px;
    &.active {
      background-color: var(--color-geekblue-1);
      color: var(--color-brand);
    }
  }
  svg {
    font-size: 24px;
    margin-right: 16px;
  }
}
</style>
